<template>
  <div>
<!--    新建教师-->
    <el-button type="primary" @click="dialogFormVisible = true">+ 新建</el-button>
    <el-input
      style="width: 220px;margin-left: 20px"
      placeholder="请输入工号"
      v-model="searchByNumber"
      prefix-icon="el-icon-search"
      type="number"
      clearable>
    </el-input>
    <el-input
      style="width: 220px;margin-left: 20px"
      placeholder="请输入姓名"
      v-model="searchByName"
      prefix-icon="el-icon-search"

      clearable>
    </el-input>

    <el-button type="primary" plain @click="searchBtnClick">查询</el-button>
    <el-button type="success" plain @click="searchResetBtnClick">重置</el-button>

    <el-dialog title="新建角色" :visible.sync="dialogFormVisible"  :close-on-click-modal='false' :show-close="false">
      <el-form :model="teacherForm" :rules="rules" ref="teacherForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="选择教师" prop="lxUserId">
          <el-input v-model="teacherForm.lxUsername" @focus="innerVisible = true" :clearable="true"></el-input>
<!--          内部dialog，选择教师-->
          <el-dialog
            width="30%"
            title="选择教师"
            :visible.sync="innerVisible"
            append-to-body>
            <el-table
              ref="singleTable"
              :data="selectTeacherList"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%">
              <el-table-column
                type="index"
                width="50">
              </el-table-column>
              <el-table-column
                property="lxUserNumber"
                label="工号"
                width="120">
              </el-table-column>
              <el-table-column
                property="lxUsername"
                label="姓名"
                width="120">
              </el-table-column>
              <el-table-column
                property="lxUserSex"
                label="性别"
                width="50">
                <template slot-scope="scope">
                  <el-tag   v-if="scope.row.lxUserSex==1">男</el-tag>
                  <el-tag type="danger"  v-if="scope.row.lxUserSex==2">女</el-tag>

                </template>
              </el-table-column>
              <el-table-column
                property="lxUserPhone"
                label="电话">
              </el-table-column>
            </el-table>


          </el-dialog>
        </el-form-item>

        <el-form-item label="职称" prop="lxPositionalTitles">
          <el-input v-model="teacherForm.lxPositionalTitles"></el-input>
        </el-form-item>
        <el-form-item label="学历" prop="lxDegree">
          <el-input v-model="teacherForm.lxDegree"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('teacherForm')">保存</el-button>
          <el-button @click="resetForm('teacherForm')">取消</el-button>
        </el-form-item>
      </el-form>
      <!--        <div slot="footer" class="dialog-footer">-->
      <!--          <el-button @click="dialogFormVisible = false">取 消</el-button>-->
      <!--          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>-->
      <!--        </div>-->
    </el-dialog>



    <div style="margin: 20px 0;"></div>
<!--教师列表-->
    <el-table
      ref="multipleTable"
      border
      :data="teacherList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">

      </el-table-column>
      <el-table-column
        prop="date"
        label="序号"
        width="80">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lxUserNumber"
        label="工号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="lxUsername"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="lxUserSex"
        label="性别" width="80">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.lxUserSex==1">男</el-tag>
          <el-tag type="danger" v-if="scope.row.lxUserSex==2">女</el-tag>

        </template>
      </el-table-column>
      <el-table-column
        prop="lxUserPhone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="lxUserEmail"
        label="邮箱" width="180">
      </el-table-column>
      <el-table-column
        prop="lxPositionalTitles"
        label="职称">
      </el-table-column>
      <el-table-column
        prop="lxDegree"
        label="学历">
      </el-table-column>
      <el-table-column
        label="操作"
        width="220">
        <template slot-scope="scope">
          <el-button @click="updateClick(scope.row)" size="small">编辑</el-button>
          <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" style="margin-bottom: 0;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 20, 40]"
        :page-size="pagesize"
        :background='true'
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" class="pageControl">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  name: "UserTeacher",
  data(){
    return{
      currentPage:1,
      pagesize:8,
      total:0,
      pageNum:1,
      searchByName:'',
      searchByNumber:"",
      search:false,
      teacherList:[
      //   {
      //   id:'',
      //   lxUserId:'',
      //   lxUserNumber:'',
      //   lxUsername:'',
      //   lxUserSex:"",
      //   lxUserPhone:"",
      //   lxUserEmail:'',
      //   lxPositionalTitles:'',
      //   lxDegree:''
      // }
      ],
      selectTeacherList:[
      //   {
      //   lxUserId: '',
      //   lxUserNumber:'',
      //   lxUsername:'',
      //   lxUserSex:'',
      //   lxUserPhone:'',
      // }
      ],
      teacherForm:{
        id:'',
        lxUserId: '',
        lxUsername:'',
        lxPositionalTitles:'',
        lxDegree:''
      },teacherFormInit:{
        id:'',
        lxUserId: '',
        lxUsername:'',
        lxPositionalTitles:'',
        lxDegree:''
      },
      dialogFormVisible:false,
      innerVisible: false,  //选择教师
      rules: {  //表单验证规则
        lxUserId: [
          {required: true, message: '请选择教师', trigger: 'blur'},
        ],
        lxUsername: [
          {required: true, message: '请选择教师', trigger: 'blur'},
        ],
        lxPositionalTitles: [
          {required: true, message: '请输入职称', trigger: 'blur'}
        ],
        lxDegree: [
          {required: true, message: '请输入学历', trigger: 'blur'}
        ],
      },
    }


  },
  mounted() {
    this.$emit('getMessage', ["人员管理","教师管理"]);
    this.load();
  },
  methods:{
    load(){
      if(this.search){
        console.log("queryBykey")
        this.searchBtnClick()
      }else {
        console.log("queryAll")
        this.$http.get('/userteacher/indexByPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize}}).then(res=>{
          console.log("this.currentPage",this.currentPage)
          this.teacherList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("this.teacherList",res)
          console.log("this.teacherList",this.teacherList)
        });
      }

      this.$http.post('/userteacher/selectTeachers').then(res => {
        this.selectTeacherList = res.data.data;
        console.log("res", res)

      });
    },//load结束
    handleSizeChange:function(size){
      //选择 一页展示多少数据时 调用的方法
      this.pagesize = size;
      console.log(size+"****");
      this.currentPage=1;
      this.load()
    },
    handleCurrentPageChange:function(currentPage){
      //点击页面项 的函数响应
      this.currentPage = currentPage;
      console.log("this.currentPage = currentPage;",this.currentPage)
      this.load()
    },
    searchBtnClick(){ //根据条件查询
      console.log("searchBtnClisk",this.searchByNumber,this.searchByName)
      this.search=true;
      if (this.searchByNumber!=''){
        console.log("searchBtnClisk searchByNumber")
        this.$http.post('/userteacher/queryByNumber',this.searchByNumber).then(res => {
          this.teacherList=[]
          if (res.data.data==null){
            this.total=this.teacherList.length
          }else {
            this.teacherList.push(res.data.data)
            this.total=this.teacherList.length
          }
          console.log("res", res)
          console.log("this.teacherList", this.teacherList)
        });

      }else if(this.searchByName!=null&&this.searchByName!=''&&this.searchByNumber==''){
        console.log("searchBtnClisk searchByName")
        this.$http.get('/userteacher/queryByKeyword',{params:{currentPage:this.currentPage,pagesize:this.pagesize,keyword:this.searchByName}}).then(res => {
          this.teacherList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("res", res)
          console.log("this.teacherList", this.teacherList)
        });
      }else{
        console.log("searchBtnClisk is null")
      }

    },searchResetBtnClick(){  //重置搜索条件
      this.searchByName=''
      this.searchByNumber="";
      this.search=false;
      this.currentPage=1
      this.load()
    },
    submitForm(teacherForm) {  //添加/更新教师表单
      this.$refs[teacherForm].validate((valid) => {
        if (valid) {
          console.log("teacherForm",this.teacherForm);
          this.$http.post('/userteacher/saveOrUpdate',this.teacherForm).then(res=>{
            console.log("res",res)
            this.load();

            if (res.data.state==200){
              this.$refs[teacherForm].resetFields();
              setTimeout(this.$message({
                message: '操作成功',
                type: 'success'
              }),1000)

            }else {
              this.$message.error('操作失败');
            }
          });

          this.closeDialog()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(teacherForm) {
      this.$refs[teacherForm].resetFields();
      this.closeDialog()
    },
    closeDialog(){
      this.teacherForm= {...this.teacherFormInit}
      this.dialogFormVisible=false
    },
    updateClick(rows){  //编辑教师
      console.log("updateClick",rows)
      this.teacherForm={...rows};
      console.log("updateClick,teacherForm",this.teacherForm)
      this.dialogFormVisible=true;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },handleCurrentChange(val) {  //选择教师
      this.currentRow = val;
      if (val!=null){
        console.log("this.currentRow",this.currentRow)
        this.teacherForm.lxUserId=val.lxUserId;
        this.teacherForm.lxUsername=val.lxUsername;
        this.innerVisible=false;
      }
    },handleDeleteClick(rows){  //根据id删除教师
      console.log("delete rows",rows);
      var id=rows.id
      this.$confirm('此操作将删除该教师信息，可在添加按钮中重新找到, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.post('/userteacher/deleteTeacher',id).then(res=>{
          console.log("res",res)
          this.load()
          if (res.data.state==200){ //成功删除弹窗
            setTimeout(this.$message({
              type: 'success',
              message: '删除成功!'
            }),1000)
          }else {
            this.$message.error('删除失败！');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

  },



}
</script>

<style scoped>

</style>
